<template>
  <page-layout>
    <div slot="toolbar">
      <el-button size="small" round type="primary" @click="newTotal">新增统计</el-button>
    </div>
    <div class="card-header">综合完成率统计</div>
    <el-card class="box-card">
      <el-card class="box-card">
        <el-form ref="searchTotalCondition" :model="searchTotalCondition" label-width="80px" inline>
          <el-form-item label="标题">
            <el-input v-model="searchTotalCondition.title" style="width: 300px;"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refresh(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
          <el-card class="box-card">
            <el-table
              :data="totalList.content" border stripe
              style="width: 100%">
              <el-table-column
                prop="id"
                label="编号"
                width="55">
              </el-table-column>
              <el-table-column prop="title" label="标题">
              </el-table-column>
              <el-table-column prop="depts" label="企业列表" width="120">
                <template slot-scope="scope">
                  <el-button type="text" @click="seeDept(scope.row)">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" type="text"  @click="seeResult(scope.row)">查看结果</el-button>
                  <el-button size="mini" type="text"  @click="editSuggestion(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text"  @click="deleteSuggestion(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="totalList.totalElements"
                :page-size="totalList.size"
                :current-page.sync="currentSuggestionPage" @current-change="getPageChange">
              </el-pagination>
            </div>
          </el-card>
    </el-card>
    <el-dialog :visible.sync="showDeptEditor" title="查看企业列表" width="50%">
      <el-card>
        <el-table
          :data="curDepts" border stripe
          style="width: 100%">
          <el-table-column
            prop="id"
            label="编号"
            width="110">
          </el-table-column>
          <el-table-column prop="name" label="名称" ></el-table-column>
        </el-table>
        <span style="float:right;margin-top: 10px;margin-bottom: 10px;">
        <el-button @click="showDeptEditor=false">返回</el-button>
      </span>
      </el-card>
    </el-dialog>
    <el-dialog :visible.sync="showResultEditor" title="查看结果" width="80%">
      <el-card>

        <el-row>
            <el-col>
              <p class="lm">标题：{{curStatic.title}}</p>
            </el-col>
            <el-col>
               <p class="lm">企业：{{getDeptStr()}}</p>
            </el-col>
           <el-col>
               <p class="lm">统计时间：{{curResult.statisticTime}}</p>
            </el-col>

            <el-col>
              <span class="lm" >
                 <el-date-picker
                   v-model="value4"
                   type="daterange"
                   range-separator="至"
                   start-placeholder="开始日期"
                   end-placeholder="截至日期">
               </el-date-picker>
                <el-button :disabled="cupButton.disable" type="primary" @click="retryComput" style="margin-left:5px;margin-bottom: 10px;">{{cupButton.name}}</el-button>
              </span>
            </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="6">
            <el-card class="card_h">
                <p class="t">综合得分</p>
                <p class="tm">{{curResult.complexScore}}</p>
                <!--<p class="t">排名：{{curResult.complexScore}}</p>-->
            </el-card>
          </el-col>
          <el-col :span="6" >
            <el-card class="card_h">
              <p class="t">已认证人数</p>
              <p class="tm">{{curResult.authNum}}</p>
              <p class="t"></p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card_h">
              <p class="t">每日练习完成率</p>
              <p class="tm">{{curResult.trainDoneRate}}</p>
              <!--<p class="t">排名：{{curResult.trainDoneRate.sort}}</p>-->
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card_h">
              <p class="t">下发任务完成率</p>
              <p class="tm">{{curResult.taskDoneRate}}</p>
              <!--<p class="t">排名：{{curResult.taskDoneRate.sort}}</p>-->
            </el-card>
          </el-col>
          <!--<el-col :span="4">-->
            <!--<el-card class="card_h">-->
              <!--<p class="t">当月浏览咨询总数</p>-->
              <!--<p class="tm">{{curResult.monthReadCount.count}}</p>-->
              <!--&lt;!&ndash;<p class="t">排名：{{curResult.monthReadCount.sort}}</p>&ndash;&gt;-->
            <!--</el-card>-->

          <!--</el-col>-->
          <!--<el-col :span="4">-->
            <!--<el-card class="card_h">-->
              <!--<p class="t">人均浏览咨询总数</p>-->
              <!--<p class="tm">{{curResult.averageCount.count}}</p>-->
              <!--&lt;!&ndash;<p class="t">排名：{{curResult.averageCount.sort}}</p>&ndash;&gt;-->
            <!--</el-card>-->
          <!--</el-col>-->
        </el-row>
        <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :span="6">
            <el-card class="card_h">
              <p class="t">答题正确率</p>
              <p class="tm">{{curResult.questCorrectRate}}</p>
              <!--<p class="t">排名：{{curResult.taskDoneRate.sort}}</p>-->
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card_h">
              <p class="t">浏览咨询总数</p>
              <p class="tm">{{curResult.newsCount}}</p>
              <!--<p class="t">排名：{{curResult.monthReadCount.sort}}</p>-->
            </el-card>

          </el-col>
          <el-col :span="6">
            <el-card class="card_h">
              <p class="t">人均浏览咨询总数</p>
              <p class="tm">{{curResult.averageCount}}</p>
              <!--<p class="t">排名：{{curResult.averageCount.sort}}</p>-->
            </el-card>
          </el-col>
        </el-row>
        <span style="float:right;margin-top: 10px;margin-bottom: 10px;">
        <el-button @click="showResultEditor=false">返回</el-button>
      </span>
      </el-card>
    </el-dialog>
    <el-dialog :visible.sync="showEditor" title="添加/编辑 统计" width="80%">
        <el-form label-width="80px">
          <el-row :gutter="10">
            <el-col >
              <el-card class="box-card">
                <el-form-item label="统计标题">
                  <el-input  v-model="currentStatistic.title"></el-input>
                </el-form-item>
                <el-card class="box-card">
                  <div slot="header">
                  <span>企业</span>
                    <span style="margin-left: 30px;">
                      <el-input  v-model="searchCompany.name" style="width: 200px" placeholder="请录入企业名称"></el-input>
                      <el-button style="margin-left: 10px" type="primary" @click="search">搜索</el-button>
                  </span>
                    <span style="margin-left: 50px">
                      <el-button type="primary" @click="save">保存</el-button>
                      <el-button @click="back">返回</el-button>
                    </span>
                  </div>
                  <el-table
                    :data="departments.content" border stripe
                    ref="multipleTable"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      prop="id"
                      label="编号"
                      width="110">
                    </el-table-column>

                    <el-table-column prop="name" label="名称" ></el-table-column>
                  </el-table>
                  <div class="mt10">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="departments.totalElements"
                      :page-size="departments.size"
                      :current-page.sync="currentDepartPage" @current-change="getDepartPage">
                    </el-pagination>
                  </div>
                </el-card>

              </el-card>
            </el-col>
          </el-row>

        </el-form>
    </el-dialog>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import { mapGetters } from "vuex";
import Status from "@/libs/status";
import Moment from "moment";
export default {
  created() {
    this.refresh();
  },
  mounted() {},
  data() {
    return {
      currentSuggestionPage: 1,
      currentDepartPage: 1,
      multipleSelection: [],
      curDepts: [],
      curStatic: {},
      showDeptEditor: false,
      showResultEditor: false,
      searchCompany: { name: "" },
      showEditor: false,
      value4: [],
      cupButton: {
        name: " 重新计算",
        disable: true
      }
    };
  },
  computed: {
    ...mapGetters({
      totalList: "totalList",
      currentStatistic: "currentStatistic",
      departments: "departments",
      curResult: "curResult",
      searchTotalCondition: "searchTotalCondition"
    })
  },
  methods: {
    deleteCom(row) {
      var index = this.currentStatistic.depts.indexOf(row);
      if (index !== -1) {
        this.currentStatistic.depts.splice(index, 1);
      }
    },
    retryComput() {
      this.curStatic.startDate = "";
      this.curStatic.endDate = "";
      if (this.value4 && this.value4.length > 0) {
        this.curStatic.startDate = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.curStatic.endDate = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      this.$store.dispatch("initResultS");
      //重新计算
      this.cupButton.name = "计算中...";
      this.cupButton.disable = true;
      var that = this;
      this.$store.dispatch("complexResultS", this.curStatic).then(ret => {
        that.cupButton.name = "重新计算";
        that.cupButton.disable = false;
      });
    },
    getDeptStr() {
      var tem = [];
      if (this.curStatic.depts) {
        this.curStatic.depts.map((item, index) => {
          tem.push(item.name);
        });
      }
      return tem.join("、");
    },
    seeResult(row) {
      this.showResultEditor = true;
      var tem = {};
      tem.id = row.id;
      this.curStatic = row;
      this.retryComput();
    },
    seeDept(row) {
      this.showDeptEditor = true;
      this.curDepts = row.depts;
    },
    getPageChange(val) {
      var tem = Object.assign(
        { pageIndex: val - 1 },
        this.searchTotalCondition
      );
      this.$store.dispatch("complexListS", tem).then(ret => {});
    },
    refresh() {
      this.getPageChange(1);
    },
    back() {
      this.showEditor = false;
      this.refresh();
    },
    save() {
      var tem = this.currentStatistic;
      // tem.depts = [];
      // this.multipleSelection.map((item, index) => {
      //   tem.depts.push({ id: item.id, name: item.name });
      // });
      console.log(tem);
      this.$store.dispatch("complexAddS", tem).then(ret => {
        this.back();
      });
    },
    newTotal() {
      this.showEditor = true;
      this.$store.commit("INIT_CURRENT_STATISTIC");
      this.getDepartPage(1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length > 0) {
        var tem = [];
        this.departments.content.map((item, index) => {
          this.currentStatistic.depts.map((item1, index1) => {
            if (item.id + "" === item1.id + "") {
              tem.push(item1);
            }
          });
        });
        console.log(tem, 10101);
        tem.map((item, index) => {
          var b = false;
          val.map((item1, index1) => {
            if (item.id + "" === item1.id + "") {
              b = true;
            }
          });
          if (!b) {
            var result = this.currentStatistic;
            var index2 = result.depts.indexOf(item);
            if (index2 !== -1) {
              result.depts.splice(index2, 1);
            }
            console.log(result.depts, 111);
            this.$store.commit("UPDATE_CURRENT_STATISTIC", result);
          }
        });
        val.map((item, index) => {
          var b = false;
          tem.map((item1, index1) => {
            if (item.id + "" === item1.id + "") {
              b = true;
            }
          });
          if (!b) {
            var result = this.currentStatistic;
            console.log(result.depts, 222);
            result.depts.push({ id: item.id, name: item.name });
            this.$store.commit("UPDATE_CURRENT_STATISTIC", result);
          }
        });
      }
    },
    search() {
      this.getDepartPage(1);
    },
    getDepartPage(val) {
      this.$store
        .dispatch(
          "getDepartments",
          Object.assign(
            {
              pageIndex: val - 1,
              pageSize: 10
            },
            this.searchCompany
          )
        )
        .then(ret => {
          var result = ret.data.data.content;
          var tem = [];
          result.forEach(item => {
            this.currentStatistic.depts.forEach(item1 => {
              if (item.id + "" === item1.id + "") {
                tem.push(item);
              }
            });
          });
          this.toggleSelection(tem);
        });
    },
    editSuggestion(row) {
      this.showEditor = true;
      this.$store.commit("UPDATE_CURRENT_STATISTIC", row);
      this.getDepartPage(1);
    },
    toggleSelection(rows) {
      console.log(rows);
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    deleteSuggestion(row) {
      this.$confirm("确认删除当前统计结果吗?", "提示", {})
        .then(() => {
          this.$store.dispatch("deleteStatisticS", { id: row.id }).then(ret => {
            this.refresh();
            this.$notify({
              title: "删除成功",
              type: "success"
            });
          });
        })
        .catch(() => {});
    }
  },
  components: {
    PageLayout
  }
};
</script>
<style scoped>
.card_h {
  height: 115px;
  background-color: #dedede;
}
.t {
  text-align: center;
  margin-top: 5px;
}
.tm {
  text-align: center;
  margin-bottom: 5px;

  margin-top: 9px;
  font-size: 23px;
}
.lm {
  text-align: left;
  margin-bottom: 5px;
  margin-top: 5px;
}
p {
  line-height: 1.41;
  text-align: justify;
  margin: -0.2em 0;
  word-break: break-all;
}
</style>
